<template>
  <div id="main" style="width: 1000px;height:500px;"></div>
</template>

<script>
//局部引用
const echarts = require('echarts');

export default {
  name: "TransView",
  data(){
    return {

    }
  },
  mounted() {

    var myChart = echarts.init(document.getElementById('main'));

    var option = {
      title: { text: '极兔物流2022年度报表' },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
        itemWidth: 10,  // 设置宽度
        itemHeight: 4, // 设置高度
        itemGap: 24, // 设置间距
        data: ['运输成本', '快递收入'],
        textStyle: {
          //文字样式
          color: '#3d6dd9',
          fontSize: '12'
        },
        right: '30%'
      },
      xAxis: [
        {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月','十一月','十二月'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '单位：(W)',
          /*min: 0,
          max: 50,
          interval: 10,
          axisLabel: {
            formatter: '{value}'
          }*/
        }
      ],
      series: [
        {
          name: '运输成本',
          type: 'bar',
          barWidth: '15%',
          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0,15.7,13.8]
        },
        {
          name: '快递收入',
          type: 'bar',
          barWidth: '15%',
          data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 179.2, 48.7, 18.8,29.8,26.5]
        }
      ],
      color: ['#b1de6a', '#4ab0ee']
    };

    myChart.setOption(option);
    }
}
</script>

<style scoped>

</style>